import { useRoutes, BrowserRouter as Router, useLocation, Navigate } from 'react-router-dom';
import { lazy } from 'react';
import Login from 'page/Login';
import MainLayout from '../layouts/MainLayout';
import Home from 'page/Home';
import NotFound from 'page/NotFound';
import teacherStore from 'store/teacher';
const Teachers = lazy(() => import('page/Teachers'));
const Menus = lazy(() => import('page/Menus'));
const Roles = lazy(() => import('page/Roles'));
const Logs = lazy(() => import('page/Logs'));
const Dictionary = lazy(() => import('page/Dictionary'));
const Emergency = lazy(() => import('page/Emergency'));
const ClassList = lazy(() => import('page/ClassList'));
const Students = lazy(() => import('page/Students'));
const StudentEmergency = lazy(() => import('page/StudentEmergency'));
const StudentArchives = lazy(() => import('page/StudentArchives'));
const StudentFee = lazy(() => import('page/StudentFee'));
const CourseList = lazy(() => import('page/CourseList'));
const TeacherStatus = lazy(() => import('page/TeacherStatus'));
const AuditFlow = lazy(() => import('page/AuditFlow'));
const MyAttendance = lazy(() => import('page/MyAttendance'));
const AuditAttendance = lazy(() => import('page/AuditAttendance'));

/**
 * 二级路由
 */
export const routers = [
    {
        index: true,
        element: <Home />
    },
    {
        path: '/teachers',
        code: 'teacherList',
        element: <Teachers />
    },
    {
        path: '/menus',
        code: 'menuList',
        element: <Menus />
    },
    {
        path: '/roles',
        code: 'roleList',
        element: <Roles />
    },
    {
        path: '/logs',
        code: 'logsList',
        element: <Logs />
    },
    {
        path: '/dictionary',
        code: 'dictionary',
        element: <Dictionary />
    },
    {
        path: '/emergency/:id',
        code: 'emergency',
        element: <Emergency />
    },
    {
        path: '/classlist',
        code: 'classesList',
        element: <ClassList />
    },
    {
        path: '/students',
        code: 'students',
        element: <Students />
    },
    {
        path: '/studentEmergency/:id',
        code: 'studentEmergencyList',
        element: <StudentEmergency />
    },
    {
        path: '/studentArchives',
        code: 'searchArchives',
        element: <StudentArchives />
    },
    {
        path: '/studentFee',
        code: 'searchFee',
        element: <StudentFee />
    },
    {
        path: '/course',
        code: 'course',
        element: <CourseList />
    },
    {
        path: '/teacherStatus',
        code: 'teachersStatus',
        element: <TeacherStatus />
    },
    {
        path: '/auditFlow',
        code: 'auditFlowList',
        element: <AuditFlow />
    },
    {
        path: '/attendance',
        code: 'attendanceList',
        element: <MyAttendance />
    },
    {
        path: '/attendance/applies',
        code: 'attendanceApplies',
        element: <AuditAttendance />
    }
]

/**
 * 路由守卫
 * @param {*} props 
 * @returns 
 */
const Auth = (props) => {
    const { children } = props;
    const location = useLocation();
    if (/^(\/(\w+)?(\/\w+)?)/.test(location.pathname)) {
        const url = RegExp.$1;
        const token = teacherStore.token;
        // 如果有token，并且在login页面，则跳转到首页
        if (url === '/login' && token) {
            return <Navigate to="/" />
        }
        // 如果没有token，并且不在login页面，则跳转到登录页
        if (url !== '/login' && !token) {
            return <Navigate to="/login" />
        }
    }
    return children;
}

/**
 * 路由
 */
const MainRouter = () => {
    return useRoutes([
        {
            path: '/login',
            element: <Login />
        },
        {
            path: '/',
            element: <MainLayout />,
            children: routers
        },
        {
            path: '*',
            element: <NotFound />
        }
    ]);
}

export default () => {
    return <Router>
        <Auth>
            <MainRouter />
        </Auth>
    </Router>
}